<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>sentox-NumberBox</title>
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/easyui.css" />
		<link type="text/css" rel="stylesheet" href="../css/themes/sentox/font-awesome.min.css">

		<script type="text/javascript" src="../js/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../js/jquery.easyui.min.js"></script>
	</head>

	<body style="margin:10px;">
		<h2>Format NumberBox</h2>
		<p>Number formatting is the ability to control how a number is displayed.</p>
		<div style="margin:20px 0;"></div>
		<table>
			<tr>
				<td>Number in the United States</td>
				<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:','"></input></td>
			</tr>
			<tr>
				<td>Number in France</td>
				<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:' ',decimalSeparator:','"></input></td>
			</tr>
			<tr>
				<td>Currency:USD</td>
				<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:',',decimalSeparator:'.',prefix:'$'"></input></td>
			</tr>
			<tr>
				<td>Currency:EUR</td>
				<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:',',decimalSeparator:' ',prefix:'€'"></input></td>
			</tr>
			<tr>
				<td></td>
				<td><input class="easyui-numberbox" value="1234567.89" data-options="precision:2,groupSeparator:' ',decimalSeparator:',',suffix:'€'"></input></td>
			</tr>
		</table>
		<!----------------------------------------------------------------------------------------------------------------------------->

		<h2>Number Range</h2>
		<p>The value is constrained to a specified range.</p>
		<div style="margin:20px 0;"></div>
		<div class="easyui-panel" style="width:400px;padding:20px 100px 60px 100px;">
			<p>Amount:</p>
			<input class="easyui-numberbox" data-options="min:10,max:90,precision:2,required:true">
			<p>Weight:</p>
			<input class="easyui-numberbox" data-options="min:10,max:90,required:true">
			<p>Age:</p>
			<input class="easyui-numberbox" data-options="min:0,max:100,required:true">
		</div>
		
		<!----------------------------------------------------------------------------------------------------------------------------->
	</body>

</html>